<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix" >
            <div style="height: 30px">
              <span>产品销量饼状图</span>
            </div>
            <!-- 数据筛选表单 -->
            <el-form ref="timeForm" :model="timeParams" :inline="true" label-width="50px" style="height: 30px">
              <!-- 数据筛选表单组件 -->
              <el-form-item label="">
                <el-input v-model="timeParams.timeRange" placeholder="请输入时间段" clearable size="small" style="width: 100px" @keyup.enter.native="getPieList" />
              </el-form-item>
              <el-form-item label="">
                <el-select v-model="timeParams.time" size="small" style="width: 100px" placeholder="请选择时间">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <!-- 数据筛选操作按钮 -->
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getPieList">搜索
                </el-button>
              </el-form-item>
            </el-form>            

          </div>
          <div ref="left" style="height: 480px; margin: 0 auto;" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div style="height: 30px">
              <span>月度销售额柱状图</span>
            </div>     
            <el-date-picker v-model="barYear" type="year" placeholder="选择年" size="small" value-format="yyyy" @keyup.enter.native="getBarList"></el-date-picker>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getBarList">搜索
            </el-button>
          </div>
          <div ref="right" style="height: 480px; margin: 0 auto;" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPieDataList,getBarDataList } from "@/api/sale"
export default {
  name: 'Dashboard',
  data() {
    return {
      // 表格数据
      dataList: [],

      barYear: "2024",

      options: [{
          value: 'month',
          label: '个月内'
        }, {
          value: 'year',
          label: '年内'
        }],

        timeParams:{ 
          timeRange: "3",
          time: "month"
        },
    }
  },
  created() {},
  mounted() {
    getPieDataList(this.timeParams).then((response) => {
      const pieData = response.data
      this.initPieChart(pieData)
    })
    getBarDataList(this.barYear).then((response) => {
      const monthData = response.data
      this.initBarChart(monthData)
    })
  },
  methods: {
    /** 查询数据列表 */
    getPieList() {
        this.loading = true;
        // 结果赋值pieData
        getPieDataList(this.timeParams).then(response => {
          const pieData = response.data
          this.initPieChart(pieData)
        })
      },
    getBarList() {
        this.loading = true;
        // 结果赋值monthData
        getBarDataList(this.barYear).then(response => {
          const monthData = response.data
          this.initBarChart(monthData)
        })
      },


    /** 初始化饼状图 */
    initPieChart(pieData) {
      var pieChart = this.$echarts.init(this.$refs.left)
      var option = {
        title: {
          text: '热卖房型分析报表',
          subtext: '按产品类型统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '占所有产品的',
            type: 'pie',
            radius: '50%',
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && pieChart.setOption(option)
    },
    /** 初始化柱状图 */
    initBarChart(monthData){
      var pieChart = this.$echarts.init(this.$refs.right)
      var option = {
        title: {
          text: '月度销售额统计报表',
          subtext: '按月份统计',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // data: [120, 200, 150, 80, 70, 110, 150, 180, 90, 100, 140, 160],
            data: monthData,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      option && pieChart.setOption(option)
    }
  }
}
</script>